/*
* 注册页面切换
* */
// 注册页面三个模块
let regOne = document.querySelector('.regMsg-one');
let regTwo = document.querySelector('.regMsg-two');
let regThr = document.querySelector('.regMsg-three');
// 获取到注册过程
let regSpan = document.querySelectorAll('.regBtn > span');
let regI = document.querySelectorAll('.regBtn i');

/*
* 第一部分
* */

/*
    获取平台服务协议
*/
let newsModal = document.querySelector("#news");
/* 遮罩层 && 模态框 */
let masks = document.querySelector(".masks");
let modals = document.querySelector(".modals");
/* 关闭按钮 && 关闭图标 */
let closeBtn = document.querySelector("#closeMask");
let forkBtn = document.querySelector("#fork");
// 显示模态框
newsModal.addEventListener('click',() => {
    masks.style.display = "block";
    modals.style.display = "block";
});
// 隐藏模态框
let close = [masks,closeBtn,forkBtn];
close.forEach((v) => {
    v.addEventListener('click',() => {
        masks.style.display = "none";
        modals.style.display = "none";
    });
});

/*
    获取同意注册按钮
*/
let reg = document.querySelector('#register');
// 获取勾选框
let agrees = document.querySelector('#sure');
/* 遮罩层 && 模态框 */
let modal = document.querySelector(".modal");
let mask = document.querySelector(".mask");
/* 关闭按钮 && 关闭图标 */
let cloSpan = document.querySelector("#closeIcon");
let modalSpan = document.querySelector(".closeBtn");
// 获取模态框内容
let modalVal = document.querySelector("#tips");
// 显示模态框
function showMask() {
    mask.style.display = "block";
    modal.style.display = "block";
}
// 隐藏模态框
let clo = [mask,cloSpan,modalSpan];
clo.forEach((v)=>{
    v.addEventListener('click',() => {
        mask.style.display = "none";
        modal.style.display = "none";
    });
});
// 同意注册验证
reg.onclick = () => {
    let agrVal = agrees.checked;
    if(agrVal === false){
        modalVal.innerText = "未勾选相关平台协议及政策声明！";
        showMask();
        return false;
    }
    // 移除注册协议样式
    regSpan[0].className = '';
    regI[0].className = '';
    regOne.style.display = 'none';
    regSpan[0].style.cursor = 'pointer';

    // 添加表单框样式
    regSpan[1].className = 'btm';
    regI[1].className = 'iBg';
    regTwo.style.display = 'block';
};

/*
* 第二部分
* */

/*
    流程向前返回
*/
regSpan[0].addEventListener('click',() => {
    if(regOne.style.display === 'block'){
        return false;
    }else if(regThr.style.display === 'block') {
        return false;
    }else {
        // 移除表单框样式
        regSpan[1].className = '';
        regI[1].className = '';
        regTwo.style.display = 'none';

        // 添加注册框样式
        regSpan[0].className = 'btm';
        regI[0].className = 'iBg';
        regOne.style.display = 'block';
    }
});

/*
    密码强度验证显示
*/
// 获取到密码输入框
let firPwd = document.querySelector('#firPwd');
let regMsgI = document.querySelector('.regMsg b i');
firPwd.addEventListener('input',() => {
    let pwdWid = firPwd.value.length;
    if(pwdWid > 5 && pwdWid < 9){
        regMsgI.style.width = '90px';
        regMsgI.style.background = '#f00';
    }else if(pwdWid >= 9 && pwdWid < 12){
        regMsgI.style.width = '190px';
        regMsgI.style.background = '#FFD400';
    }else if(pwdWid >= 12){
        regMsgI.style.width = '280px';
        regMsgI.style.background = '#32E701';
    }else if(pwdWid === 0){
        regMsgI.style.width = '0';
        regMsgI.style.background = '#fff';
    }
});

/*
    邮箱数据列表提示
*/
let emailVal = document.querySelector('#email');
let optionList = document.querySelectorAll('datalist option');
emailVal.addEventListener('input',() => {
    let val = emailVal.value;
    let arr = [val+"@qq.com",val+"@126.com",val+"@163.com",val+"@gmail.com",val+"@outlook.com"];
    optionList.forEach((v,i) => {
        if(/com/.test(val)){
            return false;
        }else {
            v.value = arr[i];
        }
    })
});

/*
    手机验证码可输入状态判断
*/
let verCodes = document.querySelector('#verCode');

/*
    手机验证码倒计时
*/
function check(){
    // 获取验证码button元素
    let btn = document.querySelector("#getCode");
    // 设置倒计时秒数，定时器名称
    let i = 60 ,timer;
    // 鼠标点击后执行的函数
    btn.addEventListener('click',() => {
        // 鼠标点击button后进入禁用状态
        btn.disabled = true;
        btn.innerHTML = i + "秒后可重新发送";
        // 禁用button的hover效果
        btn.style.pointerEvents = "none";
        btn.style.background = 'rgba(243,151,25,.5)';
        // 定时器
        timer = setInterval(function () {
            if( i > 0){
                i--;
                btn.innerHTML = i + "秒后可重新发送";
            }else if(i === 0){
                // 倒计时结束恢复默认样式
                btn.innerHTML = "重新获取";
                btn.style.background = "";
                btn.style.color = "";
                btn.style.pointerEvents = "";
                // 重置倒计时时间
                i = 60;
                // 恢复button为激活状态
                btn.disabled = false;
                // 清除定时器
                clearInterval(timer);
            }
        },1000);
    });
}
check();

/*
    提交验证
*/
// 获取所有的input框
let allInput = document.querySelectorAll('form input:not([id="regSub"])');
// 获取表单
let setForm = document.querySelector('#forms');
// 获取提交注册按钮
setForm.addEventListener('submit',() => {
    let flag = true;
    allInput.forEach((v) => {
        if(v.value === ''){
            modalVal.innerText = "不能存在未填写表单！";
            showMask();
            flag = false;
        }else if(v.className === 'addColor'){
            modalVal.innerText = "存在错误格式！";
            showMask();
            flag = false;
        }
    });
    if(flag === true){
        // 移除表单框样式
        regSpan[0].className = '';
        regI[0].className = '';
        regSpan[1].className = '';
        regI[1].className = '';
        regTwo.style.display = 'none';

        // 添加注册成功
        regSpan[2].className = 'btm';
        regI[2].className = 'iBg';
        regThr.style.display = 'block';

        // 移除注册协议手型
        regSpan[0].style.cursor = '';
    }
    return false;
});


